<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="餐饮管理系统">
    <meta name="keywords" content="HTML,CSS,餐饮,用户">
    <meta name="author" content="Marinda">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>个人中心</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="public/css/swiper.min.css">
    <link rel="stylesheet" href="public/css/person.css">
    <!--icon 矢量图标 -->
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2813781_gsa66hcs0vw.css?spm=a313x.7781069.1998910419.81&file=font_2813781_gsa66hcs0vw.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="loadding" style="margin: 0 auto;width: 50%;height: 30%;">
            <img src="public/image/loadding.gif" alt="loadding" width="100%" height="100%" >
        </div>
        <header col="col-xs-12 col-md-12 col-sm-12 col-lg-12">
            <div class="header_title col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <img src="public/image/logo.png" alt="Logo" width="50px" height="50px" class="col-xs-3 col-md-3 col-sm-3 col-lg-3">
                <h1 class="col-xs-8 col-sm-8 col-md-8 col-lg-8" style="font-size: 19px;">个人中心</h1>
            </div>
        </header>

        <main class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <nav class="show_lg_nav col-xs-2 col-sm-5 col-md-5 col-lg-2">
                    <ul class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
                        <li><h3 style="font-size: 15px;color: pink;">帮助中心</h3></li>
                        <li><span class="iconfont icon-shangyibu icons" style="color: white; "></span><a href="#">充值会员</a></li>
                        <li><span class="iconfont icon-shangyibu icons" style="color: white;"></span><a href="#">回到首页</a></li>
                        <li><span class="iconfont icon-shangyibu icons" style="color: white;"></span><a href="#">我的订单</a></li>
                        <li><span class="iconfont icon-shangyibu icons" style="color: white;"></span><a href="#">最新活动</a></li>
                        <li><span class="iconfont icon-shangyibu icons" style="color: white;"></span><a href="#">修改信息</a></li>
                    </ul>
                </nav>
                <div class="logo_xs_view_menu" onclick="clickShowNav()">
                    <span class="iconfont icon-menu" style="font-size: 30px;color: pink;"></span>
                </div>
                <nav class="show_xs_nav col-xs-4 col-sm-12 col-md-12 col-lg-12">
                    <ul class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
                        <li><h3>帮助中心</h3></li>
                        <li><a href="#">充值会员</a></li>
                        <li><a href="#">回到首页</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">最新活动</a></li>
                        <li><a href="#">修改信息</a></li>
                    </ul>
                </nav>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                <!-- 头像原型边框 -->
                <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12" style="height: 230px;">
                    <img src="public/image/touxiang.jpg" alt="logo" width="100px" height="200px" class="col-xs-12 col-md-12 col-sm-12 col-lg-12">
                </div>
                <div class="user_content col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <p class="col-xs-12 col-sm-12 col-md-12 col-lg-12">uid：<span class="uid">100000</span></p>
                    <p class="col-xs-12 col-sm-12 col-md-12 col-lg-12">用户名：<span class="showUserName">美年达</span></p>
                    <p  class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="iconfont icon-youxiang icons" style="color: blue;"></span> 邮箱：<span class="showEmail">2398648561@qq.com</span></p>
                    <p  class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="iconfont icon-VIP icons" style="color: gold;"></span> 会员身份：<span class="showVip"><span style="color: gold;">白银</span>会员</span></p>
                    <p  class="col-xs-12 col-sm-12 col-md-12 col-lg-12">员工号：<span class="showStaff">xs001</span></p>
                    <p  class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="iconfont icon-riqi icons" style="color: red;"></span> 注册时间：<span class="showRegisterDate">2021-10-31 20:56</span></p>
                    <p  class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><span class="iconfont icon-riqi icons" style="color: white;"></span >登录时间：<span class="showLoginDate">2021-10-31 20:56</span></p>
                </div>
                
            </div>
        </main>

    </div>

</body>
<script>
    $("header").hide();
    $("main").hide();
    $(document).ready(function()
    {
        setTimeout('loadding()',200);
    });

    function loadding()
    {
        $("header").slideDown(1000);
        $("main").slideDown(1000);
        $(".loadding").hide();
    }

function clickShowNav()
{
    console.log(1);
    $(".show_xs_nav").slideToggle(100);
}
</script>
</html>